<template>
	<div style="padding:30px 20px 0 20px;background: url('https://wx2.sinaimg.cn/mw690/005zpxwhly1fz0apjv1p5j3054091a9u.jpg') repeat 0 0;background-size: 100% 100%;">
		<div class="title">喜绿</div>
		<div v-if="!show">
			<input type="text" v-model="account" placeholder="请输入账号"/>
			<input type="password" v-model="password" placeholder="请输入密码"/>
		</div>
		<div v-else>
			<input type="text" v-model="phone" placeholder="请输入手机号"/>
			<button @click="send" :disabled='disabled'>{{sendout}}</button>
			<input type="text" v-model="code" placeholder="验证码"/>
			<input type="password" v-model="pw" placeholder="密码"/>
			<input type="password" v-model="password" placeholder="确认密码"/>
		</div>
		<div v-if="!show">
			<Button @click="submit" type='info' long  style="width: 100%;margin-bottom:5px;" label="large" >登陆</Button>

			<Button label="large" style="width: 100%;" type='success' long @click="show = true">注册</Button>			
		</div>
		<div v-else>
			<Button @click="register" long style="width: 100%;" >注册</Button>
			<Button style="width: 100%;" long v-if="show" @click="show = false">返回</Button>
		</div>
	</div>
</template>

<script>
	import {getData} from '../service/getData'
	import {Button} from 'iview'
	export default {
		name:'login',
		components:{
			Button
		},
		data() {
			return {
				account: '',
				password: '',
				phone: '',
				code: '',
				show: false,
				sendout: '发送验证码',
				disabled: false,
				pw: ''
			}
		},
		methods: {
			submit() {
				getData('/user/appLogin', {
					namePhone: this.account,
					password: this.password
				}).then(d => {
					if(d.code == 100) {
						sessionStorage.token = d.object.token
						sessionStorage.userId = d.object.user.userId
						this.route('index')
					}else{
						alert(d.msg);
					}
				})
			},
			register() {
				if(this.pw != this.password) {
					alert('两次密码不正确')
					return false
				}
				var _this = this
				getData('/user/appRegist', {
					phone: this.phone,
					password: this.password,
					code: this.code
				}).then(d => {
					if(d.code == 100) {
						_this.show = false
					}
				}).catch(err => {
					console.log(err)
				})
			},
			send() {
				this.disabled = true
				let num = 60
				var _this = this
				if(this.phone == '') {
					alert('请填写手机号')
					this.disabled = false
					this.sendout = '发送验证码'
					return false
				}
				getData('/user/appSend', {
					userPhone: this.phone
				}).then(d => {
					var time = setInterval(() => {
						if(num == 0) {
							clearInterval(time)
							_this.disabled = false
							_this.sendout = '重新发送'
						} else {
							_this.sendout = --num						
						}
					}, 1000)					
				}).catch((err) => {
					alert('服务错误')
				})
			}
		}
	}
</script>

<style>
.title{
	color:#fff;
	font-size:32px;
	line-height:3;
	text-align: center;
	font-family: "仿宋";
}
button{
	font-size:15px!important;
	letter-spacing:2px;
}
</style>